*{
    /*margin trible */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #25616e !important;
}

h1 {
    color: navy;
    margin-left: 20px;
}

div.nav-icons {
    display: none;
}

/* Media query */

@media only screen and (max-width: 750px) {

    .content-grid-home {
        display: grid;
        grid-template: 100%/ 1fr !important;
    }
    .exp-block-1 {
        grid-template: 100%/ 1fr !important;
        justify-items: center;
    }
    .exp-header {
        font-size: 18px !important;
    }
    .exp-content-2 {
        font-size: 16px !important;
    }
    div.home .img-left, .img-right{
        display: none;
    }
    div.about .image-about {
        display: none;
    }

    div.about  .text-about {
        grid-column: 3 span;
      }
    div.nav-icons {
        display: grid;
    }
    
    div.nav-word {
        display: none;
    }
    .exp-content-1{
        display: none !important;
    }
  
}


/*Navagation*/
.nav-box:hover {
    color: black;
    font-weight: bold;
}
.nav-grid {
    z-index: 1;
    position: fixed;
    display: grid;
    align-items: center;
    width: 100%;
    grid-template: 1fr/ repeat(12, 1fr);
    background-color: #25616e;
    border-bottom-color: #d2e5ed;
    border-bottom-style: solid;
}
.arrow {
    
    width: 0; 
    height: 0; 
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-top: 40px solid #f3573b;
}
.nav-box {
    color: whitesmoke;
    font-family: 'Courier New', Courier, monospace;
    font-size: 20px;
    text-transform: capitalize;
    text-align: center;
    
}
.home-box {
    /* background-color: purple; */
    grid-column: 1  / 3;
}
.about-box {
    /* background-color: orange; */
    grid-column: 3  / 3;
}

.arrow-box { 
    /* background-color: yellow; */
    justify-self: center;
    grid-column: 4  / 6;
}
.skills-box {
    /* background-color: blue; */
    grid-column: 6  / 8;
} 
.experience-box {
    /* background-color: red; */
    grid-column: 8 / 10;
}

.interest-box {
    /* background-color: pink; */
    grid-column: 10 / 12;
}

/*Home Content*/

.content-grid-home {
    display: grid;
    grid-template: 100%/ 1fr 1fr 1fr;
}

.image-home {
    width: fit-content;
    max-width: 100%;
    height: 85vh;
}

.line-break-home {
    height: 10px;
    background-color: #5f909c;
}

.bottom-text {
    margin: 4vh;
    font-size: 18px;
    text-align: center;
    text-transform: uppercase;
    color: whitesmoke;
    font-family: Constantia;
}

/*About Content*/
  
.line-break-about {
    height: 2px;
    background-color: #d2e5ed;
}
.greeting {
    margin: 4vh;
    font-size: 30px;
    text-align: center;
    text-transform: uppercase;
    color: whitesmoke;
    font-family: Arial, Helvetica, sans-serif;
}

.content-grid-about {
    display: grid;
    margin: 4vh 0;
    grid-template: auto/ 1fr 2fr;
    /* background-color: blue; */
    overflow: hidden;
}

.text-about {
    background-color: white;
}
.text-about p {
    min-height: 550px;
    height: fit-content;
    text-justify: center;
    padding: 6vh 8vw;
    font-size: 24px;
}

.image-about {
    width: fit-content;
    max-width: 100%;
    height: 100%;
    background-color: red;
}
.about {
    /* background-color: #5f909c; */
}

/*Skills Content*/

/* skills container */
.skills-block{
    display: grid;
    grid-template: 1fr/ 1fr 2fr;
    /* background-color: #f3573b; */
}

/* line-break style */
.thin-line-break-skills {
    margin-top:50px;
    height: 2px;
    background-color: #d2e5ed;
}

.line-break-skills {
    margin-bottom: 5vh;
    height: 2vh;
    background-color: #d2e5ed;
}

.line-break-skill-bottom {
    margin-top:50px;
    height: 20px;
    background-color: #d2e5ed;
}
/* header text style */
.header {
    margin-bottom: 2vh; 
    margin-top: 2vh;
    font-size: 30px;
    text-align: center;
    text-transform: uppercase;
    color: whitesmoke;
    font-family: Constantia;
}

/* skill-level style */
.level-table {
    display: grid;
    grid-template: 1fr/ 1fr;
}

.level-table > div:nth-child(1) {
    background: whitesmoke;
    grid-row: 1 / 1;
    grid-column: 1 / 1;
}

.level-table > div:nth-child(2) {
    background: white;
    grid-row: 1 / 1;
    grid-column: 1 / 1;
}

.skill-level-container {
    background: black;
    display: grid;
    grid-template: repeat(1,1fr)/1fr;
    margin: 1vh 1vw;
}
.level-bar {
    background: whitesmoke;
    display: grid;
    grid-template: 1fr/repeat(1,1fr);
    height: 50px;
    padding: 0 0;
    margin: 1vh 0 .5vh 2vh;
}

.level-bar-hidden{
    background: white;
    display: grid;
    grid-template: 1fr/repeat(1,1fr);
    height: 50px;
    padding: 0 0;
    margin: 1vh 0 .5vh 2vh;
}
.skill-level-block-1 {
    background: lightgreen;  
    /* border-color: black;
    border-style: solid; */
    width: 0%;
}
/* skill-list style */
.skill-list-block{
    display: grid;
    height: relative;
    padding: 0px;
    margin: 1vh 10vw;
    background-color: #273336;
}

.skill-list-header{
    height: 50px;
    padding: 1vh 0;
    margin: 0vh 0 .5vh 0;
    font-size: 30px;
    text-align: center;
    background-color: #d2e5ed;
    border-bottom-color: grey;
    border-bottom-style: solid;
    
}

.skill-list-subheader{
    color: whitesmoke;
    text-align: center;
    font-size: 20px;
    text-transform: capitalize;
    background-color: #273336; 
}

.skill-list{
    display: grid;
    padding: 5px;
    grid-template: repeat(1,1fr)/1fr 1fr;
    text-align: center;
    background-color: #d2e5ed;
    border-color: black;
    border-bottom-style: solid;
    border-top-style: solid;
}


/* experience content */

/* container */
.exp-container-1 {
    height: auto;
}

/* blocks */
.exp-block-1 {
    
    margin: 20px 0;
    background-color: #d2e5ed;
    display: grid;
    grid-template: 100% /1fr 2fr;
}

/* content */
.exp-content-1 {
    justify-content: center;
    height: 26vmax;
    width: 100%;
    /* background-color: #f3573b; */
    align-content: center;
}

.exp-content-1 img {
    height: 20vmax;
    display: block;
    margin-top: relative;
    margin-left: auto;
    margin-right: auto; 
    /* background-color: #f3a73a; */  
}

.exp-content-con-2 {
    width: fit-content;
    height: 100%;
}

.exp-content-2 {
    margin: 3vh;
    align-content: center;
    font-size: 2vw;

    
}

.exp-content-2 li {
    margin-left: 10vw;
}

.exp-header {
    font-size: 2.5vw
}

/* interest page */

/* .interest-con {
    background-color: #25616e;
} */

.interest-bar {
    /* background-color: red; */
    display: grid;
    grid-template: auto / repeat(3, 3fr);
    justify-items: stretch;
    align-items: stretch;
    
    margin: 5vh 6vw;
    
}
.interest-block:hover {
    filter:none;
}


.interest-block {
    background-color: #fafdff00;
    display: flex;
    flex-direction: column;
    margin: 0vh 2vw;
    border-radius: 1vmax;
    background-color: white;
    filter: opacity(.7);
}

.interest-content-head {
    background-color: #273336;
    border-bottom: 1px solid black;
    color: white;
    text-align: center;
    text-transform: uppercase;
    padding: 10px;
    font-size: 2.5vw;
    
}

.interest-content-img img{
    justify-content: stretch;
    width: 100%;
    height: stretch;
}

/* bootstrap carousel */

/* footer */

footer {
    margin-top: 20px;
    height: 200px;
    background-color: #273336 !important;
}

.copyright-blurb {
    color: black;
    text-align: center;
}

.social-media-footer {
    display: flex;
    justify-content: center;
    /* background-color: #d2e5ed; */
}

.social-media-footer .fa {
    margin: 10px;
}

footer .up-arrow {
    display: flex;
    justify-content: center;
}

footer .up-arrow .fa {
    margin-top: 30px;
}